<!--  -->
<template>
  <a-drawer
    :visible="visible"
    :title="$t('all.autotext425')"
    :footer="null"
    @close="handleCancel"
    :width="1000"
  >
    <a-skeleton :loading="loading" :active="true" :paragraph="{rows: 20}">
      <div class="edit-wrap">
        <div class="edit-btn">
          <a-space>
            <a-button type="primary" v-if="!pts.proManagePtsGuardian" @click="guardianEdit('add')">{{ $t('all.autotext1350') }}</a-button>
            <a-button type="primary" @click="infoEdit">{{ $t('all.autotext919') }}</a-button>
          </a-space>
        </div>
        <a-descriptions :title="$t('all.autotext720')" bordered size="small">
          <a-descriptions-item :label="$t('all.autotext1357')"> {{ pts.ptsNo }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext545')"> {{ pts.ptsTypeName }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1466')"> {{ pts.ptsStatus | enumValueByKey($const.RELATION_STATUS) }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext949')"> {{ pts.orgNo }} <span v-if="pts.orgNo">-</span> {{ pts.orgName }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext90') + ' CRC'"> {{ pts.account }} </a-descriptions-item>
          <!-- <a-descriptions-item label="中心负责人"> {{ pts.principalName }} </a-descriptions-item> -->
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1095')"> {{ pts.ptsName }} </a-descriptions-item>
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext192')"> {{ pts.evidenceType | enumValueByKey($const.DOCUMENT_TYPE) }} </a-descriptions-item>
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1359')"> {{ pts.ptsIdentity }} </a-descriptions-item>
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1104')"> {{ pts.ptsGender | filterGender }} </a-descriptions-item>
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext739')"> {{ pts.year }} </a-descriptions-item>
          <a-descriptions-item v-if="$options.filters.isPtsVisible()" :label="$t('all.autotext1714')"> {{ pts.ptsPhone }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext421')"> {{ pts.piAccount }} </a-descriptions-item>
          <a-descriptions-item v-if="pts.refuseReason" :label="$t('all.autotext607')"> {{ pts.refuseReason }} </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="edit-wrap" v-if="pts.proManagePtsGuardian">
        <div class="edit-btn">
          <a-space>
            <a-button type="primary" @click="guardianEdit('edit')">{{ $t('all.autotext919') }}</a-button>
            <a-popconfirm
              :title="$t('all.autotext1056')"
              :ok-text="$t('all.autotext792')"
              :cancel-text="$t('all.autotext975')"
              placement="topRight"
              @confirm="guardianDel"
            >
              <a-button>{{ $t('all.autotext379') }}</a-button>
            </a-popconfirm>
          </a-space>
        </div>
        <a-descriptions
          :title="$t('all.autotext1457')"
          bordered
          size="small"
          style="margin-top: 20px"
        >
          <a-descriptions-item :label="$t('all.autotext1077')" v-if="$options.filters.isPtsVisible()"> {{ pts.proManagePtsGuardian.ptsName }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext192')" v-if="$options.filters.isPtsVisible()"> {{ pts.proManagePtsGuardian.evidenceType | enumValueByKey($const.DOCUMENT_TYPE) }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1359')" v-if="$options.filters.isPtsVisible()"> {{ pts.proManagePtsGuardian.ptsIdentity }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1042')" v-if="$options.filters.isPtsVisible()"> {{ pts.proManagePtsGuardian.ptsPhone }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1492')">
            {{ pts.proManagePtsGuardian.relation | enumValueByKey($const.RELATION_TYPE) }}
            <a-button
              class="btn-border"
              size="small"
              v-if="pts.proManagePtsGuardian.proveFileUrl"
              @click="handleProve"
            >
              {{ $t('all.autotext305') }}
            </a-button>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <!-- 关联小程序 -->
      <div class="edit-wrap">
        <a-descriptions
          :title="$t('all.autotext1478')"
          bordered
          size="small"
          style="margin-top: 20px"
        >
          <a-descriptions-item :label="$t('all.autotext667')">
            {{ pts.authStatus | enumValueByKey($const.RELATION_WX) }}
            <a-popconfirm
              :title="$t('all.autotext98')"
              :ok-text="$t('all.autotext792')"
              :cancel-text="$t('all.autotext975')"
              @confirm="actionCalcel(pts)"
            >
              <a-button class="btn-border" size="small" v-if="pts.authStatus == 4">{{ $t('all.autotext603') }}</a-button>
            </a-popconfirm>
            <a-popconfirm
              :title="pts.authStatus === $const.RELATION_WX.INVITE.value ? $t('all.autotext906') : $t('all.autotext788')"
              @confirm="clickReinvite(pts)"
            >
              <a-button
                class="btn-border"
                size="small"
                style="margin-left: 10px"
                v-if="pts.authStatus == 5 || pts.authStatus == 4 || pts.authStatus == 2"
              >
                {{ pts.authStatus === 5 ? $t('all.autotext1470.1') : $t('all.autotext1470.2') }}
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              :title="$t('all.autotext98')"
              :ok-text="$t('all.autotext792')"
              :cancel-text="$t('all.autotext975')"
              @confirm="wxCalcel(pts)"
            >
              <a-button
                class="btn-border"
                size="small"
                style="margin-left: 10px"
                v-if="pts.authStatus == 1"
              >
                {{ $t('all.autotext1298') }}
              </a-button>
            </a-popconfirm>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <!-- 邀请记录 -->
      <RecordSteps v-if="invitedRecords.length" :title="$t('all.autotext780')" :data="invitedRecords"></RecordSteps>
      <!-- 收款账户管理 -->
      <bank-account :pts="pts" style="margin-top: 20px" />
      <!-- 受试者费用明细 -->
      <charge-detail :visible="visible" :pts="pts" :id="subjectId"></charge-detail>
      <!-- 费用管理 -->
      <!-- <a-descriptions title="费用管理" style="margin-top:20px;" v-if="pts.authStatus === 1" />
      <VisitTable ref="visitRef" :subjectId="subjectId" v-if="pts.authStatus === 1 && visible" /> -->
      <a-descriptions
        v-if="pts.authStatus === 3 || this.auditPmsVisible "
        :title="$t('all.autotext738')"
        style="margin-top:20px;"
      />
      <div v-if="pts.authStatus === 3 && (this.auditPmsVisible )" >
        <div class="apply">
          <a-input v-model="refuseReason" type="textarea" :placeholder="$t('all.autotext607')" />
        </div>
        <a-button type="primary" @click="agreement(1)" style="margin-right: 30px;">{{ $t('all.autotext694') }}</a-button>
        <a-button type="danger" @click="agreement(2)">{{ $t('all.autotext1072') }}</a-button>
      </div>
    </a-skeleton>

    <!-- 基本信息修改弹窗 -->
    <info-modal
      :proId="proId"
      :visible.sync="infoVisible"
      :uId="uId"
      :info="pts"
      :theDoctorList="theDoctorList"
      @handleOk="infoSuccess"
    />
    <!-- 监护人信息修改弹窗 -->
    <guardian-modal
      :visible.sync="guardianVisible"
      :uId="uId"
      :status="pts.authStatus"
      :detail="pts"
      :info="pts.proManagePtsGuardian"
      @handleOk="infoSuccess"
    />
    <!-- 上传文件预览 -->
    <PdfUpload v-model="pdfUpVisible" :fileList.sync="fileList" :fileListSee="true" />
  </a-drawer>
</template>

<script>


// import VisitTable from './visitTable.vue'
import bankAccount from '../bankAccount/bankAccount'
import infoModal from './infoModal'
import guardianModal from './guardianModal'
import PdfUpload from '@/components/pdfUpload'
import chargeDetail from './chargeDetail'
import { PtsDetails, doctorList, updatePtsAuth, reinviteSubject, deleteGuardian, canPts, delPts } from '@/api/overview/subject'
import { getInfo } from '@/api/login'
import RecordSteps from '@comp/RecordSteps/index.vue'
import recordSteps from '@views/overview/detail/responsible/mixins/record-steps'
let that
export default {
  name: 'ViewModal',
  mixins: [recordSteps],
  components: { bankAccount, infoModal, guardianModal, PdfUpload, chargeDetail, RecordSteps },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    uId: {
      type: [Number, String],
      default: null
    },
    mProId: {
      type: [Number, String],
      default: null
    },
    isEdit: {
      type: [Number, Boolean],
      default: 0
    }
  },
  data () {
    that = this
    return {
      loading: false,
      refuseReason: '',
      proId: '',
      pts: {}, // 受试者详细信息
      theDoctorList: [], // 显示当前项目研究人员
      subjectId: null, // 当前受试者id
      researchName: '', // 研究人员姓名
      auditPmsVisible: false, // 审核人员显示
      infoVisible: false,
      guardianVisible: false,
      pdfUpVisible: false,
      fileList: []
    }
  },
  filters: {
    filterGender (val) {
      if (val === -1) {
        return that.$t('all.autotext1048')
      } else if (val === 0) {
        return that.$t('all.autotext1218')
      } else if (val === 1) {
        return that.$t('all.autotext1007')
      }
    }
  },
  watch: {
    visible (newValue) {
      if (!newValue) return
      this.getPtsDetails(this.uId)
      if (this.mProId) {
        this.proId = this.mProId
        // 查询项目权限
        getInfo({ proId: this.proId }).then(res => {
          this.auditPmsVisible = !!(res.pms && res.pms.indexOf('PROJECT_PATIENT_EDIT') >= 0)
        })
      }
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    // 邀请
    async clickReinvite () {
      if (this.pts) {
        await reinviteSubject({
          id: this.pts.id,
          ptsNo: this.pts.ptsNo,
          proId: this.proId,
          status: this.pts.authStatus
        })
        this.$message.success(this.$t('all.autotext1511'))
        this.getPtsDetails(this.uId)
      }
    },
    // 取消关联
    async wxCalcel (value) {
      await canPts({ id: value.id })
      this.$message.success(this.$t('all.autotext470'))
      this.getPtsDetails(this.uId)
    },
    agreement (value) {
      if (value === 2 && !this.refuseReason) {
        this.$message.error(this.$t('all.autotext653'))
        return
      }
      this.approvalSubject()
      this.spUpdatePtsAuth({ authStatus: value })
    },
    // 受试者审批
    async spUpdatePtsAuth (parameter) {
      await updatePtsAuth({ ...parameter, id: this.uId, refuseReason: this.refuseReason })
      this.$message.success(this.$t('all.autotext654'))
      this.handleCancel()
    },
    // 请求当前项目研究人员列表
    async getDoctorList () {
      const res = await doctorList({ researchId: this.pts.researchId, proId: this.proId })
      this.theDoctorList = res
      // 匹配研究人员姓名 将其展示
      if (res.length > 0) {
        // this.researchName = res.find(item => item.id === this.pts.researchDetailId).name
      }
    },
    // 请求受试者详细信息
    async getPtsDetails (value) {
      this.loading = true
      this.subjectId = value
      try {
        const res = await PtsDetails({ id: value })
        this.pts = res
        await this.getInvitedRecord('subject')
        await this.getDoctorList()
      } catch (e) {} finally {
        this.loading = false
      }
    },
    // 关闭回调
    handleCancel () {
      this.refuseReason = ''
      this.researchName = ''
      this.pts = {}
      this.$emit('close')
    },
    // 受试者审核埋点
    approvalSubject () {},
    // 修改受试者状态埋点
    changeStatus () {},
    // 修改研究人员埋点
    changePerson () {},
    // 基本信息编辑
    infoEdit () {
      this.infoVisible = true
    },
    infoSuccess () {
      this.getPtsDetails(this.uId)
    },
    // 监护人信息编辑
    guardianEdit (e) {
      if (this.pts.authStatus !== 5) {
        this.$message.error(this.$t('all.autotext970'))
        return
      }
      this.guardianVisible = true
    },
    async guardianDel () {
      if (this.pts.authStatus !== 5) {
        this.$message.error(this.$t('all.autotext970'))
        return
      }
      await deleteGuardian({ id: this.pts.proManagePtsGuardian.id, ptsNo: this.pts.ptsNo })
      this.$message.success(this.$t('all.autotext470'))
      this.getPtsDetails(this.uId)
    },
    // 取消关联
    actionCalcel (value) {
      delPts({ id: value.id })
        .then((res) => {
          this.$message.success(this.$t('all.autotext470'))
          this.getPtsDetails(this.uId)
        })
        .catch(() => {
          this.getPtsDetails(this.uId)
        })
    },
    // 查看证明文件
    handleProve () {
      this.fileList = [{ fileUrl: this.pts.proManagePtsGuardian.proveFileUrl }]
      this.pdfUpVisible = true
    }
  }
}
</script>
<style scoped lang="less">
.apply {
  width:40%;
  margin-bottom:15px;
}
/deep/.ant-descriptions-title {
  padding-left: 20px;
  padding-top:4px;
  position: relative;
  &::before {
    content: '';
    display:block;
    width: 4px;
    height: 20px;
    background: #1890ff;
    position: absolute;
    left: 0;
    top: 6px;
  }
}
/deep/ .ant-descriptions-item-colon {
  width: 150px;
}
.edit-wrap {
  position: relative;
}
.edit-btn {
  position: absolute;
  right: 0;
  z-index:100;
}
.btn-border {
  border: 1px solid #1890ff;
  color: #1890ff;
  font-size: 12px;
  margin-left: 6px;
}
</style>
